import WebPlayer from '../components/WebPlayer'
import { minimalExample, advancedExample } from '../examples/redux'

Most medium and large React Native apps use Redux for managing data and state throughout the application. Redux is a fairly expansive topic, so we'll just cover basic usage with React Native here, leaving more advanced usage to the [Redux docs](http://redux.js.org/).

# Redux Architecture

## **`store`**

An application will create a single Redux `store` to hold <i>all</i> data and state. We can view the state of the store by calling `store.getState()`. The store's state should never be modified directly; instead, we call `store.dispatch(action)` to dispatch actions into the store.

## **`action`**

`action`s should be plain objects containing a `type` field, e.g. `{type: 'INCREMENT'}`. You can define any types you want. You may also include other fields in the `action` object. By convention, we often pass extra data in a `payload` field, e.g. `{type: 'SET_VALUE', payload: 42}`. Read more about `action` conventions here: [Flux Standard Actions](https://github.com/acdlite/flux-standard-action).

## **`reducer`**

You then define a function to handle `action`s, and update the `store` accordingly. You can choose how to update the state depending on which `type` of action your `reducer` function receives. Redux will pass this function the current state of the store, and the action you dispatched, expecting an updated state object to be returned: `(state, action) => newState`. We call this function a `reducer` function.

## That's it!

There are a lot of new terms, but it's actually not that complicated once you start using it. We'll look at two examples: an extremely minimal (contrived) example, and then the same To-Do list app from the Component State example.

# Minimal Example

This example shows the bare minimum steps necessary to set up a redux `store`, define `action` types, and define a `reducer` function to handle them.

<WebPlayer {...minimalExample} />

# To-Do List Example

Let's take a look at our To-Do List app again, now that it's using Redux.

## Files

- `App.js`<br />
  `App` is a "smart" container component. It is aware of our application's state and can fire actions to update the state, using the helper functions we defined in `actionCreators`. The container subscribes to the store, updating its own state and the props of its children whenever the store's state changes in response to an action.

- `store.js`<br />
  This file handles creating the redux store and passing it to our `App` container.

- `todoListRedux.js`<br />
  Defines the action types, the reducer function, and `actionCreators` helper functions to create actions. Note that we also moved `initialState` into this file (redux allows you to either pass it into your store on creation, or return it from your reducer).

- `List.js`, `Input.js`, `Title.js`<br />
  Presentational components - these are the same as in the Component State example.

<WebPlayer {...advancedExample} />
